<template>
  <load-more
    :pageIndex="pageIndex"
    :pageSize="pageSize"
    :totalCount="totalCount"
    :openRefresh="true"
    @refresh="refresh"
    @loadmore="loadmore"
  >
    <card
      v-for="movie in movies"
      :key="mv.id"
      :type="mv.type"
      :name="mv.name"
      :len="mv.len"
      :url="mv.url"
      :label="mv.label"
      class="card"
    />
  </load-more>
</template>

<script setup>
import card from "../movie/card.vue";
import { ref } from "vue";

const movies = ref(
  [
    {
      label: "创意",
      url: "https://codelover.club/coursefiles/images/film/创意.jpeg",
      id: 1,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "励志",
      url: "https://codelover.club/coursefiles/images/film/励志.jpeg",
      id: 2,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "搞笑",
      url: "https://codelover.club/coursefiles/images/film/搞笑.jpeg",
      id: 3,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "运动",
      url: "https://codelover.club/coursefiles/images/film/运动.jpeg",
      id: 4,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "旅行",
      url: "https://codelover.club/coursefiles/images/film/旅行.jpeg",
      id: 5,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "爱情",
      url: "https://codelover.club/coursefiles/images/film/爱情.jpeg",
      id: 6,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "广告",
      url: "https://codelover.club/coursefiles/images/film/广告.jpeg",
      id: 7,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "动画",
      url: "https://codelover.club/coursefiles/images/film/动画.jpeg",
      id: 8,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "剧情",
      url: "https://codelover.club/coursefiles/images/film/剧情.jpeg",
      id: 9,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "音乐",
      url: "https://codelover.club/coursefiles/images/film/音乐.jpeg",
      id: 10,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "科幻",
      url: "https://codelover.club/coursefiles/images/film/科幻.jpeg",
      id: 11,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "纪录",
      url: "https://codelover.club/coursefiles/images/film/纪录.jpeg",
      id: 12,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "预告",
      url: "https://codelover.club/coursefiles/images/film/预告.jpeg",
      id: 13,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "混剪",
      url: "https://codelover.club/coursefiles/images/film/混剪.jpeg",
      id: 14,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "实验",
      url: "https://codelover.club/coursefiles/images/film/实验.jpeg",
      id: 15,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "生活",
      url: "https://codelover.club/coursefiles/images/film/生活.jpeg",
      id: 16,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "时尚",
      url: "https://codelover.club/coursefiles/images/film/时尚.jpeg",
      id: 17,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "汽车",
      url: "https://codelover.club/coursefiles/images/film/汽车.jpeg",
      id: 18,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "游戏",
      url: "https://codelover.club/coursefiles/images/film/游戏.jpeg",
      id: 19,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
    {
      label: "美食",
      url: "https://codelover.club/coursefiles/images/film/美食.jpeg",
      id: 20,
      type: "混剪",
      len: `03'14"`,
      name: "电影慢镜头混剪【看见镜头的美】",
    },
  ],
  // 上滑无限滚动加载更多 组件
  (pageIndex = ref(1)),
  (pageSize = ref(10)),
  (totalCount = ref(100))
);

const loadmore = (pageIndex) => {
  console.log("加载更多。", pageIndex);
  this.pageIndex = pageIndex;
  movies = this.movies.concat(newData);
};

const refresh = () => {
  console.log("下拉刷新。");
};
</script>
<style>
.image {
  height: auto;
  overflow-y: auto;
}
.image .el-image {
  display: block;
}
</style>
